﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="hiprint/hiprint.css" rel="stylesheet" />
		<link href="hiprint/print-lock.css" rel="stylesheet" />
		<link href="layui/css/layui.css" rel="stylesheet">
	</head>
	<body>
		<div class="layui-row" style="background-color: #fff;">
			
			<!--左侧拖拽元素-->
			<div class="layui-col-sm2" >
				<div class="layui-collapse">
					<div class="layui-colla-item">
					    <div class="layui-colla-title">打印组件</div>
					    <div class="layui-colla-content layui-show">
					      <div class="layui-btn-container" style="margin-left: 10px;">
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.text"><i class="layui-icon layui-icon-form"></i>文本</button> 
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.image"><i class="layui-icon layui-icon-picture"></i>图片</button>
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.tableCustom"><i class="layui-icon layui-icon-table"></i>表格</button> 
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.html"><i class="layui-icon layui-icon-fonts-html"></i>HTML</button> 
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.longText"><i class="layui-icon layui-icon-file"></i>长文</button> 
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.hline"><i class="layui-icon layui-icon-fonts-u"></i>横线</button> 
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.vline"><i class="layui-icon layui-icon-fonts-i"></i>竖线</button> 
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.rect"><i class="layui-icon layui-icon-component"></i>矩形</button> 
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.oval"><i class="layui-icon layui-icon-circle"></i>椭圆</button>
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.qrcode"><i class="layui-icon layui-icon-engine"></i>二维码</button>
					      	<button type="button" class="layui-btn layui-btn-sm ep-draggable-item" tid="testModule.barcode"><i class="layui-icon layui-icon-menu-fill"></i>一维码</button>
					      </div>
					    </div>
					</div>
				</div>
			</div>
			
			<!--中间面板-->
			<div class="layui-col-sm8">
				<div class="layui-form layui-row layui-col-space5">
					<div class="layui-col-sm1">
						<select lay-search="" lay-filter="setPaper">
							<option value="">纸张大小</option>
							<option value="A1">A1</option>
							<option value="A2">A2</option>
							<option value="A3">A3</option>
							<option value="A4">A4</option>
							<option value="A5">A5</option>
							<option value="A6">A6</option>
							<option value="A7">A7</option>
							<option value="A8">A8</option>
							<option value="B1">B1</option>
							<option value="B2">B2</option>
							<option value="B3">B3</option>
							<option value="B4">B4</option>
							<option value="B5">B5</option>
							<option value="B6">B6</option>
							<option value="B7">B7</option>
							<option value="B8">B8</option>
						 </select>
					</div>
					<div class="layui-col-sm1">
						<input id="customWidth" name="customWidth" type="text" placeholder="宽/mm" class="layui-input">
					</div>
					<div class="layui-col-sm1">
						<input id="customHeight" name="customHeight type="text" placeholder="高/mm" class="layui-input">
					</div>
					<div class="layui-col-sm5">
						<div class="layui-btn-group">
						  <button type="button" class="layui-btn" onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">自定义</button>
						  <button type="button" class="layui-btn" onclick="rotatePaper()">旋转</button>
						  <button type="button" class="layui-btn" onclick="clearTemplate()">清空</button>
						  <button type="button" class="layui-btn layui-btn-warm" id="A4_preview">快速预览</button>
						  <button type="button" class="layui-btn layui-btn-danger" id="A4_directPrint">打印</button>
						  <button type="button" class="layui-btn layui-btn-normal" id="A4_getJson_toTextarea">保存模板</button>
						</div>
					</div>
					<div class="layui-col-sm12">
						<div id="hiprint-printTemplate" style="margin:10px 16px;"></div>
					</div>
				</div>
		  </div>
		  
		  <!--右侧设置-->
		  <div class="layui-col-sm2">
		    <div id="PrintElementOptionSetting" style="background-color: #ededed;"></div>
		  </div>
		</div>
		
		<!-- jQuery (hiprint 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="js/jquery.min.js"></script>
		<script src="hiprint/test/custom-etype-provider.js"></script>
		<!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
		<script src="hiprint/polyfill.min.js"></script>
		<!--拖拽元素设置面板-->
		<script src="hiprint/jquery.minicolors.min.js"></script>
		<!-- 条形码生成组件-->
		<script src="hiprint/JsBarcode.all.min.js"></script>
		<!-- 二维码生成组件-->
		<script src="hiprint/qrcode.js"></script>
		<!-- hiprint 核心js-->
		<script src="hiprint/hiprint.bundle.js"></script>
		<!-- 调用浏览器打印窗口helper类，可自行替换-->
		<script src="hiprint/jquery.hiwprint.js"></script>
		<!--layui-->
		<script src="layui/layui.js"></script>
		<script>
			// 打印模板
			var hiprintTemplate;
			// 打印对象
			var printData = { text: "这是打印时显示的文本" };
			layui.use(['form','layer'],function(){
				// 初始化表单对象
				var form = layui.form;
				var layer = layui.layer;
				
				// 初始化 provider , 才能让 "可拖拽元素" 可正常拖拽 【因为要先去处理 provider 中的 "tid"】
				hiprint.init({
					providers: [new customElementTypeProvider()]
				});

				//设置左侧拖拽事件
				hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
				
				// 初始化设计面板
				hiprintTemplate = new hiprint.PrintTemplate({
					template: 
					{
						"panels":[
							{
								"index":0,
								"paperType":"A5",
								"height":220,
								"width":300,
								"paperHeader":0,
								"printElements":[]
							}
						]
					},
					settingContainer: '#PrintElementOptionSetting',
					paginationContainer: '.hiprint-printPagination'
				});
				
				//打印设计
				hiprintTemplate.design('#hiprint-printTemplate');
				
				// 打印预览
				$('#A4_preview').click(function() {
					// 在此处输入 layer 的任意代码
					layer.open({
					  type: 1, // page 层类型
					  area: ['50%', '80%'],
					  title: '打印预览',
					  shadeClose: true, // 点击遮罩区域，关闭弹层
					  maxmin: true, // 允许全屏最小化
					  anim: 0, // 0-6 的动画形式，-1 不开启
					  content: hiprintTemplate.getHtml(printData)[0].innerHTML
					});
				});
				
				// 直接打印
				$('#A4_directPrint').click(function() {
					hiprintTemplate.print(printData);
				});
				
				// 获取json配置
				$('#A4_getJson_toTextarea').click(function() {
					layer.open({
					  type: 1, // page 层类型
					  area: ['50%', '80%'],
					  title: '保存数据',
					  shadeClose: true, // 点击遮罩区域，关闭弹层
					  maxmin: true, // 允许全屏最小化
					  anim: 0, // 0-6 的动画形式，-1 不开启
					  content: JSON.stringify(hiprintTemplate.getJson())
					});
				})
				
				// 纸张大小选择框事件
				form.on('select(setPaper)',function(data){
					hiprintTemplate.setPaper(data.value);
				});
			});
			// 自定义纸张大小
			function setPaper(paperTypeOrWidth, height) {
				hiprintTemplate.setPaper(paperTypeOrWidth, height);
			}
			
			// 旋转
			function rotatePaper() {
				hiprintTemplate.rotatePaper();
			}
			
			// 清空模板
			function clearTemplate() {
				hiprintTemplate.clear();
			}
		</script>
	</body>
</html>
